<template>
  <span class="full-screen-wrapper" :title="isFullScreen ? '退出全屏' : '全屏'">
    <svg-icon :name="isFullScreen ? 'tuichuquanping' : 'quanping'" :color="color" size="16px" @click="handleClick"></svg-icon>
  </span>
</template>

<script setup>
import { defineEmits, computed, defineProps } from 'vue';
import screenfull from 'screenfull';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
const store = useStore();

defineProps({
  color: {
    type: String,
    default: '#fff',
  },
});


const isFullScreen = computed(() => {
  return store.getters['setting/isFullScreen'];
});

const emit = defineEmits(['refresh']);
const handleClick = () => {
  if (!screenfull.isEnabled) {
    ElMessage.warning('进入全屏失败');
    return false;
  }
  store.dispatch('setting/changeFullScreen', !isFullScreen.value);
  screenfull.toggle();
  emit('refresh', screenfull.isFullscreen);
};
</script>

<style lang="scss" scoped>
</style>
